<template>
	<div style="height: 100%;" v-loading="loading">
		<el-form :inline="true" :model="searchObj" class="demo-form-inline">
			<el-form-item label="分组名:">
				<el-input v-model="searchObj.groupName" />
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="getTable">查询</el-button>
				<el-button type="warning" @click="resetForm">重置</el-button>
			</el-form-item>
		</el-form>
		<div>
			<el-button type="primary" @click="addGroupFun">新增分组</el-button>
		</div>
		<el-table ref="tableRef" :data="tableData" :max-height="maxHeight" style="width: 100%">
			<el-table-column type="index" width="55" />
			<el-table-column prop="_id" label="分组id" width="150px" show-overflow-tooltip/>
			<el-table-column prop="groupName" label="组名" />
			<el-table-column prop="createTime" label="创建时间"/>
			<el-table-column label="操作" align="right">
				<template #default="scope">
					<el-button size="small" type="primary" @click="addDeviceInGroupFunc(scope.row)">添加设备</el-button>
					<el-button size="small" type="warning" @click="editGroupFun(scope.row)">改组名</el-button>
					<el-button size="small" type="primary" @click="groupDeviceList(scope.row)">设备列表</el-button>
					<el-button size="small" type="danger" @click="delGroupFun(scope.row)">删除分组</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :current-page="searchObj.page" :page-size="searchObj.limit" :total="total" :page-sizes="[50, 100, 500, 1000]" layout="sizes, prev, pager, next, total" @update:page-size="handleSizeChange" @update:current-page="handleCurrentChange" style="padding: 10px 0px;" />
	</div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useTableHeight } from '@/hooks/useTableHeight'
import { addDialog } from '@/components/yDialog/index.js';
import { groupPageListApi, groupUpdateApi, groupDelApi, groupAddApi } from '@/api/group'
import AddDeviceInGroup from './components/addDeviceInGroup.vue'
import GroupDeviceList from './components/groupDeviceList.vue'

const { tableRef, maxHeight } = useTableHeight()
let total = ref(0)
let loading = ref(false)
const tableData = reactive([])
const searchObj = reactive({
	groupName: '',
	page:1,
	limit:50
})

const resetForm = async () => {
	searchObj.groupName = ''
	await getTable()
}

const getTable = async () => {
	loading.value = true
	const { data,count } = await groupPageListApi(searchObj)
	total.value = count
	tableData.length = 0
	tableData.push(...data)
	loading.value = false
}

const addGroupFun = async ()=>{
	ElMessageBox.prompt('请输入分组名称', '提醒', {
		confirmButtonText: '确定',
		cancelButtonText: '取消'
	}).then(async({ value }) => {
		const res = await groupAddApi({groupName:value})
		ElMessage({
			type:res.code == 0 ? 'success' : 'error',
			message:res.msg
		})
		await getTable()
	})
}

const editGroupFun = async (row)=>{
	ElMessageBox.prompt('请输入分组名称', '提醒', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		inputValue:row.groupName
	}).then(async({ value }) => {
		const res = await groupUpdateApi({_id:row._id, groupName:value})
		ElMessage({
			type:res.code == 0 ? 'success' : 'error',
			message:res.msg
		})
		await getTable()
	})
}

const delGroupFun = async (row)=>{
	ElMessageBox.confirm(`确认删除[${row.groupName}]分组?`,'提醒',{
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		const res = await groupDelApi({_id:row._id})
		ElMessage({
			type:res.code == 0 ? 'success' : 'error',
			message:res.msg
		})
		await getTable()
	})
}

const addDeviceInGroupFunc = async (row) =>{
	addDialog({
		title: '添加设备',
		width: '80%',
		props: {
			id: row._id,
			row: row
		},
		component: AddDeviceInGroup,
		callBack: async (data) => {
			await getTable()
		},
	});
}

const groupDeviceList = async (row)=>{
	addDialog({
		title: '设备列表',
		width: '80%',
		props: {
			id: 1,
			row: row
		},
		component: GroupDeviceList,
		callBack: async (data) => {
			await getTable()
		},
	});
}

const handleSizeChange = async (value) => {
	searchObj.limit = value
	searchObj.page = 1
	await getTable()
}

const handleCurrentChange = async (value) => {
	searchObj.page = value
	await getTable()
}


onMounted(async () => {
	await getTable()
})
</script>

<style lang="scss" scoped></style>